<!-- V-webapp/src/views/ProductDetailView.vue -->
<template>
  <div class="product-detail-container">
    <div class="page-header">
      <el-button @click="$router.back()" class="back-btn" type="primary" link>
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      <h2>商品详情</h2>
    </div>
    
    <div class="product-content">
      <div class="product-image">
        <el-image 
          :src="productImage" 
          fit="cover"
          class="main-image"
        >
          <template #error>
            <div class="image-error">
              <el-icon><Picture /></el-icon>
              <span>图片加载失败</span>
            </div>
          </template>
        </el-image>
      </div>
      
      <div class="product-info">
        <h1 class="product-name">{{ product.name }}</h1>
        <p class="product-desc">{{ product.description }}</p>
        <div class="product-price">¥{{ product.price }}</div>
        <div class="product-stock">库存: {{ product.stock }}件</div>
        
        <div class="product-actions">
          <el-button 
            type="primary" 
            size="large"
            :disabled="product.stock === 0"
            @click="addToCart"
            class="add-cart-btn"
          >
            <el-icon><ShoppingCart /></el-icon>
            加入购物车
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, Picture, ShoppingCart } from '@element-plus/icons-vue'
import { getProductDetail } from '@/api/products'

// 导入本地商品图片
import julyDream from '@/assets/images/七月梦境.jpg'
import julyBadge from '@/assets/images/七月吧唧.jpg'
import mousePad from '@/assets/images/鼠标垫.jpg'
import zhaotaiyang from '@/assets/images/赵太阳立牌.jpg'
import defaultProductImg from '@/assets/images/S2.jpg'

const route = useRoute()
const product = ref({
  id: 0,
  name: '商品名称',
  description: '商品描述',
  price: 0,
  stock: 0,
  cover_image: ''
})

// 图片映射表
const imageMap = {
  '七月梦境.jpg': julyDream,
  '七月吧唧.jpg': julyBadge,
  '鼠标垫.jpg': mousePad,
  '赵太阳立牌.jpg': zhaotaiyang,
  'S2.jpg': defaultProductImg
}

// 计算商品图片
const productImage = computed(() => {
  if (product.value.cover_image && imageMap[product.value.cover_image]) {
    return imageMap[product.value.cover_image]
  }
  return defaultProductImg
})

const addToCart = () => {
  ElMessage.success('已加入购物车')
}

const loadProductDetail = async () => {
  try {
    const productId = Number(route.params.id)
    const response = await getProductDetail(productId)
    console.log('商品详情数据:', response)
    product.value = response.data || {}
  } catch (error) {
    console.error('加载商品详情失败:', error)
    // 使用模拟数据
    product.value = {
      id: Number(route.params.id),
      name: '虚拟商品 ' + route.params.id,
      description: '这是一个虚拟商品的描述信息',
      price: 99.99,
      stock: 10,
      cover_image: 'S2.jpg'
    }
  }
}

onMounted(() => {
  loadProductDetail()
})
</script>

<style scoped>
.product-detail-container {
  min-height: 100vh;
  background: white;
  padding: 16px;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.product-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-image {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
}

.main-image {
  width: 100%;
  height: 100%;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #999;
  gap: 8px;
}

.product-info {
  padding: 0 8px;
}

.product-name {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.product-desc {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.product-price {
  font-size: 24px;
  font-weight: 700;
  color: #ff4757;
  margin-bottom: 8px;
}

.product-stock {
  font-size: 14px;
  color: #999;
  margin-bottom: 24px;
}

.product-actions {
  display: flex;
  gap: 12px;
}

.add-cart-btn {
  flex: 1;
  height: 48px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 600;
}
</style>